<template>
    <el-drawer
        v-model="isShow"
        size="50%"
        :append-to-body="true"
        :destroy-on-close="true"
        @close="closeHandle"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="form" label-width="auto" label-position="right" ref="formRef" :rules="rules" v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="上访人" required prop="name">
                        <el-input v-model="form.name" :disabled="form.name !== ''" placeholder="请输入案件名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话" required prop="Tel">
                        <el-input v-model="form.Tel" placeholder="请输入上访人电话"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" required prop="idcard">
                        <el-input v-model="form.idcard" placeholder="请输入身份证号"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作单位">
                        <el-input v-model="form.danwei" placeholder="请输入案件名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭地址">
                        <el-input v-model="form.address" placeholder="请输入案件名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="重点人员" required prop="name">
                        <el-radio-group v-model="form.radio">
                            <el-radio-button label="是" value="yes" />
                            <el-radio-button label="否" value="no" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="来访类型" required prop="name">
                        <el-select v-model="form.casetype" clearable>
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="级别" required prop="name">
                        <el-select v-model="form.level" clearable>
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="相关领域" required prop="name">
                        <el-select v-model="form.fields" clearable>
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="答复形式" required prop="name">
                        <el-select v-model="form.ResponseFormat" clearable>
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反映事项" required prop="ReflectionMatters">
                        <el-input
                            v-model="form.ReflectionMatters"
                            :rows="3"
                            type="textarea"
                            :autosize="false"
                            resize="none"
                            placeholder="请输入来访人员反映事项"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="处理情况" required prop="HandlingSituation">
                        <el-input
                            v-model="form.HandlingSituation"
                            :rows="3"
                            type="textarea"
                            :autosize="false"
                            resize="none"
                            placeholder="请输入处理情况"
                        />
                    </el-form-item>
                </el-col>
                <el-divider></el-divider> <!-- 普通分割线 -->
                <el-col :span="24">
                    <p class="mt-2 mb-2" style="color:#1388F5;font-weight: bold">历史来访信息</p>
                </el-col>
                <el-col :span="24" style="width:100%">
                    <!-- 表格区域 -->
                    <!-- <AddEditRegistVisitTable ref="AddEditRegistVisitTableRef" /> -->
                    <collapseTbale ref="collapseRef" />
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <el-button @click="isShow = false">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()

import AddEditRegistVisitTable from "./AddEditRegistVisitTable.vue"; // 引入上传组件
import collapseTbale from "./collapseTbale.vue"; // 引入上传组件

import {validateIdCard,validatePhoneNumber} from "@/validate/validateIdCard.js";

const {nj_anjian_type,nj_anjian_status } = proxy.useDict('nj_anjian_type','nj_anjian_status')

// 是否显示抽屉
const isShow = ref(false)
const loading = ref(false)
// 抽屉标题
const title = ref('')
const rules = {
    name: [{ required: true, message: "案件名称不能为空", trigger: "blur" }],
    // 手机号
    Tel: [
        {required: true, message: '请填写手机号', trigger: 'blur'},
        {validator: validatePhoneNumber, trigger: 'blur'}
    ],
    // 身份证
    idcard: [
        {required: true, message: '请填写身份证号', trigger: 'blur'},
        {validator: validateIdCard, trigger: 'blur'}
    ],
    casetype: [{ required: true, message: "来访类型不能为空", trigger: "blur" }],
    level: [{ required: true, message: "级别不能为空", trigger: "blur" }],
    fields: [{ required: true, message: "相关领域不能为空", trigger: "change" }],
    ResponseFormat: [{ required: true, message: "答复形式不能为空", trigger: "change" }],
    ReflectionMatters: [{ required: true, message: "反映事项不能为空", trigger: "change" }],
    HandlingSituation: [{ required: true, message: "处理情况不能为空", trigger: "change" }],
    
    
}

const isAdd = ref(false)
const form = ref({
    name:'哈哈哈',
    radio:'no'
})
// 通知事件
const emit = defineEmits(['getList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

onMounted(() => {

})

  
const showAddCase = () => {
    title.value = '来访登记';
    isAdd.value = true
    changeShowStatus()
}
const showEditCase = async (data) => {
    title.value = '修改案件信息'
    changeShowStatus()
}

defineExpose({showAddCase,showEditCase})

const submitHandle = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            // if (form.value['caseCaseinfoId']) {
            //     editCaseInfo(form.value).then(res => {
            //         changeShowStatus()
            //         emit('getList', '来了老弟')
            //     })
            // } else {
            //     createCaseInfo(form.value).then(res => {
            //         changeShowStatus()
            //         emit('getList', '来了老弟')
            //     })
            // }
        }
    });
}

// 关闭后的回调事件
const closeHandle = () => {
    console.log(123123)
    emit('getList','123')
}
</script>

<style lang="scss" scoped>
h4{margin:0;}
.el-divider--horizontal{margin:0}
:deep().el-descriptions__label{width:15%}
:deep().el-descriptions__content{width:35%}
</style>